<template>
  <div>
    <!--图片区开始  -->
    <form>
      <view class="upload_img">
        <!--大图片  -->
        <view class="big_img">
          <view class="left" @click='chooseImage' id="c_0">
            <image src="/static/images/upload.png" class="big_upload" @click='chooseImage'>
            </image>
            <view class="bigimg-view">
              <image class="upload-pic" :src="tempFilePaths[0].tempFilePath"></image>
            </view>
          </view>
          <view class="right">
            <view class="comm_img" @click='chooseImage' id="c_1">
              <image src="/static/images/upload.png" class="small_upload" @click='chooseImage'>
              </image>

              <view class="smallimg-view">
                <image class="smallupload-pic" :src="tempFilePaths[1].tempFilePath"></image>
              </view>

            </view>
            <view class="comm_img del_borderBottom" @click='chooseImage' id="c_2">
              <image src="/static/images/upload.png" class="small_upload" @click='chooseImage'>
              </image>

              <view class="smallimg-view1">
                <image class="smallupload-pic" :src="tempFilePaths[2].tempFilePath"></image>
              </view>

            </view>
          </view>
        </view>
        <!--结束  -->
        <!--小图片  -->
        <view class="small_img">
          <view class="s_left" @click='chooseImage' id="c_3">
            <image src="/static/images/upload.png" class="small_upload" @click='chooseImage'>
            </image>

            <view class="smallimg-view2">
              <image class="bottomupload-pic" :src="tempFilePaths[3].tempFilePath"></image>
            </view>

          </view>
          <view class="s_center" @click='chooseImage' id="c_4">
            <image src="/static/images/upload.png" class="small_upload" @click='chooseImage'>
            </image>
            <view class="smallimg-view3">
              <image class="bottomupload-pic" :src="tempFilePaths[4].tempFilePath"></image>
            </view>
          </view>
          <view class="s_right" @click='chooseImage' id="c_5">
            <image src="/static/images/upload.png" class="small_upload" @click='chooseImage'>
            </image>
            <view class="smallimg-view4">
              <image mode="center" class="otherupload-pic" :src="tempFilePaths[5].tempFilePath"></image>
            </view>
          </view>
        </view>

        <!--结束  -->
      </view>
    </form>
    <!--图片区结束  -->
    <!--为爱发声开始  -->
    <view class="title">以音会友</view>
    <form>
      <view class="introduce">
        <view class="left">用语音来介绍自己</view>
        <view class="center">编辑声音</view>
        <view class="right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>
      <!--为爱发声结束  -->
      <view class="interval"></view>
      <!--基本资料开始  -->
      <view class="my_info">
        <view class="left">
          <view class="top">
            <view class="name">我的名字</view>
            <view class="sex">
              <image src="/static/images/sex.png" class="icon_sex"></image>
            </view>
            <view class="age">18岁</view>
          </view>
          <view class="bottom">编辑个人的基本信息（姓名,年龄）</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>
      <!--基本资料结束  -->
      <!--出售时间开始  -->
      <view class="title">时间出售</view>
      <view class="sell_time">
        <view class="left">
          <view class="time">110/每小时</view>
          <view class="date">周一/周二</view>
          <view class="date del-paddingleft">晚上/凌晨</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>



      </view>
      <!--出售时间结束  -->
      <!--个性标签开始  -->
      <view class="title">标签</view>
      <view class="personality_label">
        <view class="p_left">
          <view class="tags">我是小仙女</view>
          <view class="tags">我爱我自己</view>
          <view class="tags">我是最好看的</view>
          <!--<view class="tags">哈哈哈哈哈哈哈</view>-->
          <!--<view class="tags">开心开心</view>-->
          <!--<view class="tags">我是最好看的</view>-->
          <!--<view class="tags">哈哈哈哈哈哈哈</view>-->
          <!--<view class="tags">开心开心</view>-->
        </view>
        <view class="p_right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>
      <!--个性标签结束  -->

      <!--我的信息  -->
      <view class="title">我的信息
        <text>(可选填)</text>
      </view>
      <view class="from">
        <view class="comm_left">来自</view>
        <view class="comm_center">
          <input/>
        </view>
        <view class="comm_right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>
      <view class="position">
        <view class="comm_left">职业</view>
        <view class="comm_center">
          <input/>
        </view>
        <view class="comm_right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>
      <view class="sentence">
        <view class="comm_left">一刻一言</view>
        <view class="comm_center">
          <input/>
        </view>
        <view class="comm_right">
          <image src="/static/images/right.png" class="icon_right"></image>
        </view>
      </view>

      <!--确定按钮  -->
      <button class="sure_btn">确认</button>
    </form>
  </div>
</template>

<script>
  import {wxutil} from "../../utils/wxutils";

  export default {
    data() {
      return {
        tempFilePaths: [{tempFilePath: null}, {tempFilePath: null}, {tempFilePath: null}, {tempFilePath: null}, {tempFilePath: null}, {tempFilePath: null}],
      }
    },

    methods: {
        chooseImage:async function (e) {
        const id = e.mp.currentTarget.id;
        if(id != null) {
          const index = parseInt(id.split('_')[1])
          const res = await wxutil.chooseImage()
          this.tempFilePaths[index].tempFilePath = res.tempFilePaths
        }
      }
    }
  }
</script>

<style scoped>
  /*上传图片区  */

  .upload_img {
    width: 100%;
    height: 870rpx;
    background: #f3f3f3;
  }
  .big_upload{
    width:104rpx;
    height:104rpx;
    margin-top:246rpx;
    margin-left: 200rpx;
  }
  .small_upload{
    width:104rpx;
    height:104rpx;
    margin-top:98rpx;
    margin-left: 72rpx;
  }
  /*大图片上传  */
  .bigimg-view{
    width: 498rpx;
    height: 590rpx;
    position: absolute;
    z-index: 1;
    top: 0;

  }
  .upload-pic {
    display: block;
    width: 498rpx;
    height: 590rpx;
  }
  /*小图片上传  */
  .smallimg-view{
    width: 250rpx;
    height: 294rpx;
    position: absolute;
    z-index: 1;
    top: 0;
  }
  .smallimg-view1{
    width: 250rpx;
    height: 294rpx;
    position: absolute;
    right:0;
    z-index: 1;
    top: 296rpx;
  }
  .smallimg-view2{
    width: 248rpx;
    height: 276rpx;
    position: absolute;
    left:0;
    z-index: 1;
    top:592rpx;
  }
  .smallimg-view3{
    width: 248rpx;
    height: 276rpx;
    position: absolute;
    left:250rpx;
    z-index: 1;
    top:592rpx;
  }
  .smallimg-view4{
    width: 250rpx;
    height: 276rpx;
    position: absolute;
    right:0;
    z-index: 1;
    top:592rpx;
  }
  .smallupload-pic {
    display: block;
    width: 250rpx;
    height: 294rpx;
  }
  .bottomupload-pic{
    display: block;
    width: 248rpx;
    height: 276rpx;
  }
  .otherupload-pic{
    display: block;
    width: 250rpx;
    height: 276rpx;
  }
  /*大图片  */

  .big_img {
    width: 100%;
    height: 590rpx;
  }

  .big_img .left {
    width: 498rpx;
    height: 590rpx;
    float: left;
    border-right: 1rpx solid #fff;
    border-bottom: 1rpx solid #fff;
  }

  .big_img .right {
    width: 250rpx;
    height: 590rpx;
    float: left;
  }

  .big_img .right .comm_img {
    width: 100%;
    height: 294rpx;
    border-bottom: 1rpx solid #fff;
  }

  /*小图片  */

  .small_img {
    width: 100%;
    height: 279rpx;
    border-bottom: 1rpx solid #fff;
  }

  .small_img .s_left {
    width: 248rpx;
    height: 276rpx;

    border-bottom: 1rpx solid #fff;
    border-right: 1rpx solid #fff;
    float: left;
    clear: both;
  }

  .small_img .s_center {
    width: 248rpx;
    height: 276rpx;
    border-bottom: 1rpx solid #fff;
    border-right: 1rpx solid #fff;
    float: left;
  }

  .small_img .s_right {
    width: 250rpx;
    height: 276rpx;
    float: left;
  }

  .title {
    width: 100%;
    height: 72rpx;
    padding: 18rpx 0 14rpx 40rpx;
    box-sizing: border-box;
    background: #f3f3f3;
    color: #ff6d6d;
    font-size: 28rpx;
  }

  /*语音介绍我自己  */

  .introduce {
    width: 100%;
    height: 110rpx;
  }

  .introduce .left {
    width: 508rpx;
    height: 110rpx;
    padding: 36rpx 0 32px 40rpx;
    box-sizing: border-box;
    color: #666;
    font-size: 28rpx;
    float: left;
  }

  .introduce .center {
    width: 142rpx;
    height: 110rpx;
    padding: 36rpx 0 34px 30rpx;
    box-sizing: border-box;
    color: #ff6d6d;
    font-size: 28rpx;
    float: left;
  }

  .introduce .right {
    width: 54rpx;
    height: 110rpx;
    padding: 36rpx 0 34px 30rpx;
    box-sizing: border-box;
    color: #666;
    font-size: 28rpx;
    float: left;
    margin-right: 40rpx;
  }

  .icon_right {
    width: 40rpx;
    height: 40rpx;
  }

  .interval {
    width: 100%;
    height: 20rpx;
    background: #eee;
  }

  /*基本信息  */

  .my_info {
    width: 100%;
    height: 124rpx;
  }

  .my_info .left {
    width: 650rpx;
    height: 100%;
    float: left;
  }

  .my_info .left .top {
    width: 650rpx;
    height: 64rpx;
    padding: 20rpx 0 0 40rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    color: #333;
    float: left;
  }

  .my_info .left .top .name {
    height: 64rpx;
    padding-right: 38rpx;
    box-sizing: border-box;
    float: left;
  }

  .my_info .left .top .sex {
    float: left;
  }

  .my_info .left .top .age {
    float: left;
  }

  .icon_sex {
    width: 48rpx;
    height: 48rpx;
    margin-right: 38rpx;
  }

  .my_info .left .bottom {
    width: 100%;
    height: 60rpx;
    padding: 8rpx 0 18rpx 40rpx;
    box-sizing: border-box;
    color: #999;
    font-size: 24rpx;
    clear: both;
  }

  .my_info .right {
    width: 54rpx;
    height: 110rpx;
    padding: 40rpx 0 34px 30rpx;
    box-sizing: border-box;
    float: left;
    margin-right: 40rpx;
  }

  /*出售时间  */

  .sell_time {
    width: 100%;
    height: 144rpx;

  }
  .sell_time .left {
    width: 650rpx;
    height: 100%;
    float: left;
  }

  .sell_time .left .time{
    width: 650rpx;
    height: 64rpx;
    padding: 24rpx 0 0 40rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333;

  }

  .sell_time .left .date{
    /* width: 650rpx; */
    height: 64rpx;
    padding: 20rpx 0rpx 20rpx 40rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333;
    margin-right: 38rpx;
    float: left;

  }
  .del-paddingleft{
    padding-left:0!important;
  }

  .sell_time .right {
    width: 54rpx;
    height: 144rpx;
    padding: 52rpx 0 58rpx 30rpx;
    box-sizing: border-box;
    float: left;
    margin-right: 40rpx;
  }
  /*个性标签  */

  .personality_label {
    flex-wrap: wrap;
    display: -webkit-flex;
    flex-direction: row;
  }

  .personality_label .p_left {
    flex: 8;
    width: 650rpx;
    /* background: pink; */
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    box-sizing: border-box;
    /* background: gainsboro; */
    /* float: left;  */
    flex-wrap: wrap;
    display: -webkit-flex;
    flex-direction: row;
  }

  .tags {
    white-space: nowrap;
    padding: 4rpx 12rpx 4rpx 12rpx;
    box-sizing: border-box;
    border: 1rpx solid #333;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #333;
    float: left;
    margin-right: 20rpx;
    margin-top: 24rpx;
  }

  .personality_label .p_right {
    flex: 1;
    width: 100rpx;
    margin: auto;
    padding-left:30rpx;
    box-sizing:border-box;
  }

  /*我的信息  */
  .title text{
    color: #999;
    margin-left: 40rpx;
  }
  .from, .position, .sentence {
    width: 100%;
    height: 80rpx;
    margin-left: 40rpx;
    border-bottom: 1rpx solid #f3f3f3;
  }
  .sentence{
    margin-bottom: 40rpx;
  }
  .comm_left {
    width: 120rpx;
    height: 80rpx;
    float: left;
    padding: 20rpx 0 20rpx 0;
    box-sizing: border-box;
    color: #999;
    font-size: 28rpx;
  }
  .comm_center {
    width: 498rpx;
    height: 80rpx;
    float: left;
    padding: 20rpx 0 20rpx 0;
    box-sizing: border-box;
    color: #999;
    font-size: 28rpx;
  }
  .comm_right {
    width: 92rpx;
    height: 80rpx;
    padding: 20rpx 40rpx 29px 10rpx;
    box-sizing: border-box;
    color: #666;
    font-size: 28rpx;
    float: left;
    margin-right: 40rpx;
  }

  /*确定按钮  */
  .sure_btn {
    color: #fff;
    font-size: 36rpx;
    width: 452rpx;
    height: 80rpx;
    background: #ff6d6d;
    border: 2rpx solid #ff6d6d;
    border-radius: 8rpx;
    line-height: 80rpx;
    margin-bottom: 202rpx;
  }

</style>
